<template>
  <!-- 账号输入框 -->
  <div class="input-row">
    <label class="input-label">账号</label>
    <input type="text" v-model="username" class="input-box" placeholder="请输入账号" />
  </div>
  <!-- 密码输入框 -->
  <div class="input-row">
    <label class="input-label">密码</label>
    <div class="password-container">
      <input
          :type="showPassword ? 'text' : 'password'"
          v-model="password"
          class="input-box password-input"
          placeholder="请输入密码"
      />
    </div>
  </div>
  <div class="butt">
    <lay-button radius class="butenroll">没有账号注册</lay-button>
    <lay-button type="primary" radius class="butlogin" @click="handleLogin">登录</lay-button>
  </div>
</template>

<script>
import axios from 'axios';
import "./Passwordlogin.css";
import { layer } from "@layui/layui-vue";

export default {
  data() {
    return {
      username: '',
      password: '',
      showPassword: false,
    };
  },
  methods: {
    // 处理登录请求
    handleLogin() {
      const loginData = {
        username: this.username,
        password: this.password
      };

      axios.post('http://localhost:8080/login/loginver', null, {
        params: loginData // 这里使用 `params` 来传递查询参数
      })
          .then(response => {
            // 登录成功
            if (response.data) {
              // 将登录成功的用户数据存储到 localStorage
              localStorage.setItem('key', JSON.stringify(response.data.data.userKey));// 输出所有用户数据
              localStorage.setItem('user', JSON.stringify({
                userid: response.data.data.userid,
                username:response.data.data.username,
                email:response.data.data.email,
                phone:response.data.data.phone,
                address:response.data.data.address,
                subtitle:response.data.data.subtitle,
                gender:response.data.data.gender,
                profilepicture:response.data.data.profilepicture,
              }));// 输出所有用户数据
            }
            layer.msg('登录成功', { icon: 1 }); // 使用全局 layer 弹出成功信息
            // 登录成功后通知父组件关闭弹窗
            this.$emit("login-success");  // 使用 $emit 触发事件
          })
          .catch(error => {
            // 登录失败
            this.password = ''; // 清除密码
            layer.msg('登录失败，请检查账号和密码', { icon: 2, time: 3000 }); // 使用全局 layer 弹出失败信息
            console.error('登录失败', error);
          });
    }
  },
};
</script>
